<template>
  <el-container class="home-container">
    <!-- 侧边栏 -->
    <el-aside :width="isCollapse ? '64px' : '240px'" class="aside">
      <div class="logo" :class="{ 'logo-mini': isCollapse }">
        <span v-if="!isCollapse">智能养老管理系统</span>
        <span v-else>养老</span>
      </div>
      <el-menu
        :collapse="isCollapse"
        :default-active="activeMenu"
        class="el-menu-vertical"
        router
        background-color="#001529"
        text-color="#fff"
        active-text-color="#409eff"
      >
        <el-menu-item index="/home/dashboard">
          <el-icon><PieChart /></el-icon>
          <template #title>仪表盘</template>
        </el-menu-item>
        
        <!-- 老人角色菜单项 -->
        <template v-if="userInfo.role === 2 || userInfo.role === 'DOCTOR'">
          <el-menu-item index="/home/health">
            <el-icon><DataAnalysis /></el-icon>
            <template #title>健康数据</template>
          </el-menu-item>
          <el-menu-item index="/home/emergency">
            <el-icon><WarningFilled /></el-icon>
            <template #title>紧急呼叫</template>
          </el-menu-item>
          <el-menu-item index="/home/service">
            <el-icon><Ticket /></el-icon>
            <template #title>服务预约</template>
          </el-menu-item>
        </template>
        
        <!-- 家属角色菜单项 -->
        <template v-if="userInfo.role === 3 || userInfo.role === 'CARETAKER'">
          <el-menu-item index="/home/health">
            <el-icon><DataAnalysis /></el-icon>
            <template #title>老人健康</template>
          </el-menu-item>
          <el-menu-item index="/home/emergency">
            <el-icon><WarningFilled /></el-icon>
            <template #title>紧急呼叫</template>
          </el-menu-item>
          <el-menu-item index="/home/service">
            <el-icon><Ticket /></el-icon>
            <template #title>服务预约</template>
          </el-menu-item>

        </template>
        
        <!-- 管理员角色菜单项 -->
        <template v-if="userInfo.role === 1 || userInfo.role === 'ADMIN'">
          <el-menu-item index="/home/health">
            <el-icon><DataAnalysis /></el-icon>
            <template #title>健康管理</template>
          </el-menu-item>
          <el-menu-item index="/home/emergency">
            <el-icon><WarningFilled /></el-icon>
            <template #title>紧急呼叫管理</template>
          </el-menu-item>
          <el-menu-item index="/home/service">
            <el-icon><Ticket /></el-icon>
            <template #title>服务预约管理</template>
          </el-menu-item>

        </template>
        
        <el-menu-item index="/home/profile">
          <el-icon><User /></el-icon>
          <template #title>个人信息</template>
        </el-menu-item>
      </el-menu>
    </el-aside>
    
    <!-- 主内容区 -->
    <el-container>
      <!-- 头部导航栏 -->
      <el-header class="header">
        <div class="header-left">
          <el-button type="text" @click="toggleCollapse">
            <el-icon><Menu /></el-icon>
          </el-button>
          <span class="breadcrumb">{{ currentPageTitle }}</span>
        </div>
        <div class="header-right">
          <el-dropdown>
            <span class="user-info">
              <el-avatar size="small" :src="avatarUrl">{{ userInfo.name?.[0] || '用' }}</el-avatar>
              <span>{{ userInfo.name || '用户' }}</span>
              <el-icon class="el-icon--right"><ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="goToProfile">
                  <el-icon><UserIcon /></el-icon>
                  <span>个人信息</span>
                </el-dropdown-item>
                <el-dropdown-item divided @click="handleLogout">
                  <el-icon><SwitchButton /></el-icon>
                  <span>退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      
      <!-- 页面内容 -->
      <el-main class="main-content">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { Menu, PieChart, DataAnalysis, WarningFilled, Ticket, User as UserIcon, ArrowDown, SwitchButton } from '@element-plus/icons-vue';
import type { User } from '../services/userService';

const route = useRoute();
const router = useRouter();
const isCollapse = ref(false);
const userInfo = ref<User>({
  id: 0,
  username: '',
  name: '',
  phone: '',
  email: '',
  role: 2, // 默认值，实际会从localStorage获取
  status: 1,
  createTime: '',
  updateTime: ''
});

const avatarUrl = ref('');

// 计算当前激活的菜单
const activeMenu = computed(() => {
  return route.path;
});

// 计算当前页面标题
const currentPageTitle = computed(() => {
  const routeMatched = route.matched[1];
  return routeMatched?.meta.title as string || '智能养老管理系统';
});

// 切换侧边栏折叠状态
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value;
};

// 跳转到个人信息页面
const goToProfile = () => {
  router.push('/home/profile');
};

// 退出登录
const handleLogout = () => {
  localStorage.removeItem('token');
  localStorage.removeItem('user');
  ElMessage.success('已退出登录');
  router.push('/login');
};

// 初始化页面
onMounted(() => {
  // 从localStorage获取用户信息
  const userStr = localStorage.getItem('user');
  if (userStr) {
    try {
      const parsedUser = JSON.parse(userStr);
      // 合并用户信息，确保name属性存在
      userInfo.value = {
        ...userInfo.value,
        ...parsedUser,
        name: parsedUser.name || parsedUser.username || '用户'
      };
    } catch (e) {
      console.error('用户信息解析失败:', e);
    }
  }
});
</script>

<style scoped>
.home-container {
  height: 100vh;
}

.aside {
  background-color: #001529;
  overflow: hidden;
  transition: width 0.3s;
}

.logo {
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  background-color: #001529;
  transition: all 0.3s;
}

.logo-mini {
  font-size: 14px;
}

.el-menu-vertical {
  height: calc(100vh - 60px);
  border-right: none;
}

.header {
  background-color: #fff;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.breadcrumb {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.user-info:hover {
  background-color: #f5f7fa;
}

.main-content {
  padding: 20px;
  background-color: #f5f7fa;
  overflow-y: auto;
}

/* 页面切换动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>